<template>
	<view class="header">
		<view
			class="navbar"
			:class="{
				'navbar-mini': !props.matchLeftWindow,
				'navbar-max': matchLeftWindow,
				'popup-menu': themeStore.popupMenuOpened,
				'fixed-logo': !themeStore.isFixedLogo,
				'is-collapse': themeStore.isCollapse,
			}"
		>
			<!-- 左侧logo 名称 -->
			<template v-if="themeStore.isFixedLogo">
				<view class="navbar-left pointer flex justify-center items-center" :style="{ width: !themeStore.isCollapse ? '240px' : '64px' }">
					<view class="logo flex" :class="{'pl-10px':!themeStore.isCollapse}">
						<image :src="appStore.app.site_logo" mode="heightFix"></image>
						<view class="pl-10px online" :class="{'hide-line':themeStore.isCollapse}">
							<view class="name"> {{ appStore.app.site_name || themeStore.websiteTitle }} </view>
							<view class="flex items-center">
								<view class="dot"></view>
								<view class="ml-5px">在线</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<view class="navbar-right flex-1">
				<view class="flex flex-1 justify-between nav-top">
					<!-- 菜单切换 -->
					<breadcrumb :show-left-window="showLeftWindow" />
					<!-- 菜单右侧 -->
					<user />
				</view>
				<view class="nav-list flex items-center">
					<tags-view></tags-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import breadcrumb from './components/breadcrumb.vue';
import user from './components/user.vue';
import tagsView from './components/tagsView.vue';
import { useThemeStore } from '@/uni_modules/dx-admin/stores/theme';
import { useAppStore } from '@/uni_modules/dx-admin/stores/app';
const props = defineProps<{
	matchLeftWindow: Boolean;
	showLeftWindow: Boolean;
}>();
const themeStore = useThemeStore(),
	appStore = useAppStore();
console.log('top window');
</script>

<style lang="scss" scoped>
.header {
	height: 85px;
	width: 100%;
	box-sizing: border-box;
}

.navbar {
	font-size: 14px;
	position: relative;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.navbar-max {
	.navbar-left {
		height: 100%;
		color: #ffffff;
		transition: all 0.35s ease-in-out;
		.logo {
			display: flex;
			align-items: center;
			transition: all 0.5s ease-in-out;
			image {
				height: 38px;
				width: 38px;
			}
		}
		.online {
			width: 170px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 12px;
			transition: all 0.35s ease-in-out;
			&.hide-line{
				width: 0px;
			}
			.name {
				font-size: 15px;
				margin-bottom: 3px;
			}
			.dot {
				width: 8px;
				height: 8px;
				background-color: #18bc9c;
				border-radius: 50%;
			}
		}
	}
	&.fixed-logo {
		.navbar-right {
			padding-left: 240px;
		}
		.nav-list {
			width: calc(100vw - 240px);
		}
		&.is-collapse {
			.navbar-right {
				padding-left: 64px;
			}
		}
	}
	&.is-collapse {
		.nav-list {
			width: calc(100vw - 64px);
		}
	}
}

/* 小屏时，隐藏的内容 */
.navbar-mini {
	.navbar-left {
		display: none;
	}
	.nav-list {
		width: 100vw;
	}
}

.navbar-right {
	height: 100%;
	transition: all 0.35s ease-in-out;
	.nav-top {
		border-bottom: 1px solid #f1f2f3;
		height: 50px;
	}
	.nav-list {
		height: 35px;
		box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
	}
}
</style>
